<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .add_div {
            width: 580px;
            height: 800px;
            border: none;
            float: left;
            margin-top: 0px;
            margin-left: 0px;
            padding-left: 150px;
        }

        .file-list {
            height: 125px;
            display: none;
            list-style-type: none;
        }

        .file-list img {
            max-width: 170px;
            vertical-align: middle;
        }

        .file-list .file-item {
            margin-bottom: 10px;
            float: left;
            margin-left: 20px;
        }

        .file-list .file-item .file-del {
            display: block;
            margin-left: 20px;
            margin-top: 5px;
            cursor: pointer;
        }


    </style>
    <link rel="stylesheet" href="/designer/css/pintuer.css">
    <link rel="stylesheet" href="/designer/css/admin.css">
</head>
<body>
<div class="add_div">


    <p>
    <div class="form-group">
        <button class="button bg-main icon-check-square-o" style="cursor: pointer;margin-left: 150px;"
                href="javascript:;" id="upload">上传
        </button>
        <button class="button bg-main icon-check-square-o" style="cursor: pointer;margin-left: 150px;margin-top: 10px"
                href="javascript:;" id="examine">提交审批申请
        </button>
        <div class="label">
            <label>上传类型：</label>
        </div>
        <select class="input" id="uploadType"
                style="width: 200px; line-height: 17px;">
            <option value=0>请选择上传类型</option>
            <option value=1>项目户型图表</option>
            <option value=2>项目合同表</option>
            <option value=3>项目设计图表</option>
            <option value=4>项目施工图表</option>
        </select>
    </div>
    </p>

    <p>
        <span>图片：</span>
        <input type="file" name="" id="choose-file" multiple="multiple">
    </p>
    <p>
    <ul class="file-list ">

    </ul>
    </p>


</div>
<script src="/designer/js/jquery-3.5.1.min.js"></script>
<script src="/designer/js/layer/layer.js"></script>
<script>

    $(function () {

        var $button = $('#upload'),
            //选择文件按钮
            $file = $("#choose-file"),
            //回显的列表
            $list = $('.file-list'),
            //选择要上传的所有文件
            fileList = [];
        //当前选择上传的文件
        var curFile;
        // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
        // 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
        $file.on('change', function (e) {
            //上传过图片后再次上传时限值数量
            var numold = $('li').length;
            if (numold >= 6) {
                layer.alert('最多上传6张图片');
                return;
            }
            //限制单次批量上传的数量
            var num = e.target.files.length;
            var numall = numold + num;
            if (num > 6) {
                layer.alert('最多上传6张图片');
                return;
            } else if (numall > 6) {
                layer.alert('最多上传6张图片');
                return;
            }
            //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
            curFile = this.files;
            //将FileList对象变成数组
            fileList = fileList.concat(Array.from(curFile));
            for (var i = 0, len = curFile.length; i < len; i++) {
                reviewFile(curFile[i])
            }
            $('.file-list').fadeIn(2500);
        })


        function reviewFile(file) {
            //实例化fileReader,
            var fd = new FileReader();
            //获取当前选择文件的类型
            var fileType = file.type;
            //调它的readAsDataURL并把原生File对象传给它，
            fd.readAsDataURL(file);//base64
            //监听它的onload事件，load完读取的结果就在它的result属性里了
            fd.onload = function () {
                if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                    $list.append('<li style="border:solid  ; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="170"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
                } else {
                    $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
                }

            }
        }

        //点击删除按钮事件：
        $(".file-list").on('click', '.file-del', function () {
            let $parent = $(this).parent();
            console.log($parent);
            let index = $parent.index();
            fileList.splice(index, 1);
            $parent.fadeOut(850, function () {
                $parent.remove()
            });

        });
        var projectNo = window.location.href.split("?")[1].split("&")[0].split("=")[1]
        $("#examine").on('click', function () {
            $.ajax({
                url: "/project/project/addDrawings",
                data: {projectNo: projectNo, eId: 0},
                type: "put",
                dataType: "json",
                success: function () {
                    layer.msg("选择设计师成功，即将关闭页面");
                    setTimeout(function () {//设置定时器
                        parent.location.reload(true);//刷新父级页面
                        var index = parent.layer.getFrameIndex(window.name);
                        //获取当前弹窗的Id
                        parent.layer.close(index);
                    }, 3000);
                }
            })
        });
        //点击上传按钮事件：
        var date1 = new Date();
        var date2 = new Date();

        $button.on('click', function () {
            var uploadType = $('#uploadType').val();
            var url = null;
            if (uploadType == 0) {
                layer.alert('请选择上传类型');
                return;
            } else if (uploadType == 1) {
                url = '/designer/designer/insert'+"/"+projectNo;
            } else if (uploadType == 2) {
                url = '/designer/contract/insert'+"/"+projectNo;
            } else if (uploadType == 3) {
                url = '/designer/plan/insert'+"/"+projectNo;
            } else if (uploadType == 4) {
                url = '/designer/construction/insert'+"/"+projectNo;
            }

            if (fileList.length > 6) {
                layer.alert('最多允许上传6张图片');
                return;
            } else {
                var formData = new FormData();
                for (var i = 0, len = fileList.length; i < len; i++) {
                    formData.append('img', fileList[i]);
                }
                date1 = date2;
                date2 = new Date();
                if ((date2.getTime() - date1.getTime()) < 5000) {
                    alert("请不要重复提交")
                } else {
                    $.ajax({
                        url: url,
                        type: 'post',
                        data: formData,
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function () {
                            alert("添加成功");
                            location.reload();


                        }, error: function () {
                            alert("添加失败");
                        }
                    })
                }
            }
        })
    })
</script>
</body>
</html>